<template>
    <div class="rejisterRoot">
        <xxl-status></xxl-status>
        <xxl-hint ref="hint" :text="warn.rejister" @change="hintChange"></xxl-hint>
        <title text="注册">
            <div slot="left">
                <div @click="back()">返回</div>
            </div>
        </title>
        <scroll-view scroll-y="true" class="ctx" :style="{ height: 'calc(100% - (' + header.top + 'px + 45px))' }">
            <div class="phone">
                <div class="hint">手机号</div>
                <div :class="step == 1 ? 'input_box' : 'input_box_ok'"><input v-model="input.phone" autofocus class="input"
                        type="text"></div>
                <div class="sendauth" v-show="step > 1" @click="sendauth()">{{ warn.sendText }}</div>
            </div>
            <div class="warn" :class="warn.phoneColor">{{ warn.phone }}</div>
            <div class="auth">
                <div class="hint">验证码</div>
                <div class="input_box"><input v-model="input.authCode" :disabled="step == 1" class="input" type="text">
                </div>
            </div>
            <div class="warn" :class="warn.authCodeColor">{{ warn.authCode }}</div>
            <div class="pwd">
                <div class="hint">密码</div>
                <div class="input_box"><input v-model="input.pwd" :disabled="step == 1" class="input" type="password"></div>
            </div>
            <div class="warn" :class="warn.pwdColor">{{ warn.pwd }}</div>
            <div class="entPwd">
                <div class="hint">确认密码</div>
                <div class="input_box"><input v-model="input.enterPwd" :disabled="step == 1" class="input" type="password">
                </div>
            </div>
            <div class="warn" :class="warn.enterPwdColor">{{ warn.enterPwd }}</div>
            <div class="button" @click="commit()"><xxl-botton>注册</xxl-botton></div>
        </scroll-view>
    </div>
</template>

<script>
import api from '../../api';


let interval = null
let time = 0
export default {
    name: "WorkspaceJsonRejister",
    data() {
        return {
            step: 1,
            commiting: false,
            input: {
                phone: "",
                authCode: "",
                pwd: "",
                enterPwd: ""
            },
            warn: {
                phone: "",
                phoneColor: "",
                authCode: "",
                authCodeColor: "",
                pwd: "",
                pwdColor: "",
                enterPwd: "",
                enterPwdColor: "",
                sendText: "发送验证码",
                rejister: ""
            }
        };
    },
    watch: {
        "input.phone"(n) {
            if (n.length != 11) {
                this.warn.phone = "手机号格式不正确";
                this.warn.phoneColor = "err";
            }
            else {
                this.warn.phone = "正在验证手机号是否被注册";
                this.warn.phoneColor = "warn";
                this.step = 1;
                setTimeout(async () => {
                    if (this.input.phone == n) {
                        console.log("发送验证");
                        let data = await api.hasUserPhone(this.input.phone);
                        if (data.data) {
                            console.log("验证失败");
                            this.warn.phone = "该手机号已被注册";
                            this.warn.phoneColor = "err";
                        }
                        else {
                            console.log("验证通过");
                            this.warn.phone = "你可以使用该手机号";
                            this.warn.phoneColor = "succ";
                            this.step = 2;
                        }
                    }
                }, 1500);
            }
        },
        "input.authCode"(d) {
            if (d.length != 6) {
                this.warn.authCode = "请输入正确长度的验证码";
                this.warn.authCodeColor = "err";
            }
            else {
                this.warn.authCode = "ok";
                this.warn.authCodeColor = "succ";
            }
        },
        "input.pwd"(d) {
            if (d.length < 8) {
                this.warn.pwd = "密码小于8位";
                this.warn.pwdColor = "err";
            }
            else if (d.length > 16) {
                this.warn.pwd = "密码大于16位";
                this.warn.pwdColor = "err";
            }
            else {
                this.warn.pwd = "ok";
                this.warn.pwdColor = "succ";
            }
            if (d == this.input.enterPwd) {
                this.warn.enterPwd = "ok";
                this.warn.enterPwdColor = "succ";
            }
            else {
                this.warn.enterPwd = "密码不一致";
                this.warn.enterPwdColor = "err";
            }
        },
        "input.enterPwd"(d) {
            if (d == this.input.pwd) {
                this.warn.enterPwd = "ok";
                this.warn.enterPwdColor = "succ";
            }
            else {
                this.warn.enterPwd = "密码不一致";
                this.warn.enterPwdColor = "err";
            }
        }
    },
    mounted() {
    },
    methods: {
        back() {
            uni.navigateBack();
        },
        sendauth() {
            if (this.warn.sendText == "发送验证码") {
                api.sendPhoneAuth(this.input.phone);
                time = 59;
                this.warn.sendText = (time + 1) + "s";
                interval = setInterval(() => {
                    this.warn.sendText = time + "s";
                    time--;
                    if (time == 0) {
                        this.warn.sendText = "发送验证码";
                        clearInterval(interval);
                    }
                }, 1000);
            }
        },
        async commit() {
            if (this.commiting) { return }
            this.commiting = true
            if (this.warn.phone == "你可以使用该手机号" && this.warn.authCode == "ok" && this.warn.pwd == "ok" && this.warn.enterPwd == "ok") {
                let data = await api.userRejister({
                    username: this.input.phone,
                    phone: this.input.phone,
                    password: this.input.pwd,
                    code: this.input.authCode
                });
                if (data.code==500) {
                    this.warn.rejister = data.msg
                    this.$refs.hint.open()
                    if(data.msg == '验证码错误'){
                        this.warn.authCode = data.msg
                    }
                    this.warn.authCodeColor = "err";
                }else if(data.code == 200){
                    this.warn.rejister = data.msg
                    this.$refs.hint.open()
                    this.warn.authCode = data.msg
                    this.warn.authCodeColor = "succ";
                }
                this.commiting = false
            } else {
                this.warn.rejister = '你的信息有误不可以注册'
                this.$refs.hint.open()
                this.commiting = true
            }
        },
        hintChange(d){
            if(d == 'closeed'&& this.warn.rejister == '注册成功'){
                uni.navigateBack()
            }
        }
    },
    components: {  }
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.warn {
    color: $uni-color-warning;
}

.succ {
    color: $uni-color-success;
}

.err {
    color: $uni-color-error;
}

.phone,
.auth,
.pwd,
.entPwd {
    margin: 30px auto 0px;
    border-radius: 8px;
    padding-left: 20px;
    height: 45px;
    display: flex;
    border: 1px solid $uni-color-primary;
    width: 90%;
    box-sizing: border-box;
    align-items: center;

    .hint {
        width: 3em;
    }

    overflow: hidden;
}

.phone {
    .sendauth {
        width: 90px;
        padding: 20px;
        background: $uni-color-primary;
        color: $uni-text-color-inverse;
        text-align: center;
    }

    .input_box {
        width: calc(100% - 3em);
    }

    .input_box_ok {
        width: calc(100% - 130px - 3em);
    }
}

.input {
    height: 40px;
    font-size: 20px;
    padding: 10px;
}

.warn {
    height: 30px;
    padding-left: 40px;
    box-sizing: border-box;
}

.button {
    padding: 30px 50px 0;
}
</style>